<template>
  <div>
    <el-divider content-position="center">产品陈列</el-divider>
    <el-table
        :data="tableData.filter(data => !search || data.fname.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}"
    >
      <el-table-column
          prop="date"
          label="生产日期"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="fdate"
          label="保质期/天"
          sortable
          width="150">
      </el-table-column>
      <el-table-column
          prop="fname"
          label="名称"
          width="150">
      </el-table-column>
      <el-table-column
          prop="address"
          label="图片">
        <template slot-scope="{row}">
          <el-image
              style="width: 50px; height: 50px"
              :src="row.fimg"
              fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column
          prop="type"
          label="类别"
          width="150"
          :filters="typeList"
          :filter-method="filterTag"
          filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.ftype === '1' ? 'success' : 'warning'"
              disable-transitions>{{ scope.row.ftype === '1' ? '素食' : '饮品' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="fnum"
          label="数量/件"
          sortable
          width="150">
      </el-table-column>
      <el-table-column
          prop="fprice"
          label="价格/元"
          width="150">
      </el-table-column>
      <el-table-column
          align="right">
        <template slot="header" slot-scope="scope">
          <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
            <el-button @click="updateProduct(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
            <el-button @click="deleteProduct(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>


    <el-drawer
        :before-close="handleCloseByMy"
        :visible.sync="dialog"
        direction="ltr"
        custom-class="demo-drawer"
        ref="drawer"
    >
      <div class="demo-drawer__content">
        <div style="text-align: left">
          <el-form :model="form">
            <el-form-item label="名称：" :label-width="formLabelWidth">
              <el-input v-model="form.fname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="数量：" :label-width="formLabelWidth">
              <el-input-number v-model="form.fnum" controls-position="right" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item label="价格：" :label-width="formLabelWidth">
              <el-input-number v-model="form.fprice" :precision="2" :step="0.1"></el-input-number>
            </el-form-item>
            <el-form-item label="生产日期：" :label-width="formLabelWidth">
              <el-date-picker
                  v-model="form.fdate"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="种类：" prop="type" :label-width="formLabelWidth">
              <el-radio-group v-model="form.ftype">
                <el-radio value="1" label="1">素食</el-radio>
                <el-radio value="2" label="2">饮品</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="介绍：" prop="desc" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="form.fdesc"></el-input>
            </el-form-item>

            <el-form-item label="图示：" :label-width="formLabelWidth">
              <template>
                <el-card>
                  <el-row>
                    <el-col v-for="(image, index) in urls" :key="index" :span="8" :xs="24" :sm="12" :md="8" :lg="6">
                      <el-image style="width: 50px;height: 50px" :src="image" fit="cover"></el-image>
                      <el-button @click="deleteImage(image)" type="danger" icon="el-icon-delete" circle></el-button>
                    </el-col>
                  </el-row>
                </el-card>
              </template>
            </el-form-item>

            <el-form-item label="添加：" prop="desc" :label-width="formLabelWidth">
              <template>
                <el-upload
                    class="upload-demo"
                    action="http://localhost:8081/index/upload"
                    :before-remove="beforeRemove"
                    :on-success="handleAvatarSuccess"
                    list-type="text"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </template>
            </el-form-item>
          </el-form>
        </div>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="handleClose">确 定</el-button>
        </div>
      </div>
    </el-drawer>

  </div>
</template>

<script>
export default {
  name: "ProductList",
  data() {
    return {
      tableData: [],
      typeList: [],
      search: '',
      form: {
        fname: '',
        fid: '',
        fdate:'',
        fnum: 0,
        fprice: 0.00,
        ftype: '',
        fdesc: ''
      },
      urls: [],
      dialog: false,
      formLabelWidth: '80px',
      disabled: false,
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    handleCloseByMy(){
      this.dialog = !this.dialog
    },
    filterTag(value, row) {
      return row.ftype === value;
    },
    handleClose(done) {
      this.$confirm('确定要提交表单吗？')
          .then(_ => {
            this.loading = true;
            console.log(this.form)
            axios({
              method:'post',
              url:'http://localhost:8081/boss/updateFoodMsg',
              data:{
                fName: this.form.fname,
                fId: this.form.fid,
                fNum: this.form.fnum,
                fDate: this.form.fdate,
                fPrice: this.form.fprice,
                fType: this.form.ftype,
                fDesc: this.form.fdesc,
                fImg: this.urls
              }
            }).then(res=>{
              console.log(res)
              if (res.data.code === 0){
                this.$notify({
                  title: '成功',
                  message: res.data.msg,
                  type: 'success'
                });
                this.dialog = false;
                this.$router.go(0);
              }
            }).catch(err=>{
              console.log(err)
            })
          }).catch(_ => {});
    },
    cancelForm() {
      this.dialog = false;
    },
    updateProduct(row) {
      this.dialog = true
      axios({
        method: 'get',
        url: `http://localhost:8081/boss/getFoodListByImgList/${row.fid}`
      }).then(res => {
        console.log(res)

        this.form.fname = res.data.data.fname
        this.form.fid = res.data.data.fid
        this.form.fnum = res.data.data.fnum
        this.form.fprice = res.data.data.fprice
        this.form.ftype = res.data.data.ftype
        this.form.fdesc = res.data.data.fdesc
        this.urls = res.data.data.fimg

      }).catch(err => {
        console.log(err)
      })
    },
    deleteProduct(row){
      this.$alert('确认删除吗', '提示', {
        confirmButtonText: '确定',
        callback: action => {
          axios({
            method:'get',
            url:`http://localhost:8081/boss/deleteProduct/${row.fid}`
          }).then(res=>{
            console.log(res)
            if (res.data.code === 0){
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.$router.go(0);
              return
            }
            this.$message.error('删除失败，请联系管理员');
          }).catch(err=>{
            console.log(err)
          })
        }
      });
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleAvatarSuccess(res, file) {
      this.urls.push("http://localhost:8081/index/" + res.data)
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    deleteImage(img) {
      const index = this.urls.findIndex(item => item === img)
      if (index !== -1){
        this.urls.splice(index,1)
      }
    }
  },
  mounted() {
    axios({
      method: 'get',
      url: 'http://localhost:8081/boss/getFoodList'
    }).then(res => {
      this.tableData = res.data.data
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
    axios({
      method: 'get',
      url: 'http://localhost:8081/common/getType'
    }).then(res => {
      this.typeList = res.data.data
    }).catch(err => {
      console.log(err)
    })
  }

}
</script>

<style scoped>
</style>
